<!-- 在script 标签上使用setup，可以不用再使用return的写法了 -->
<!-- 其中 setup 标记的 script 必须是单独的，不能和export等其他共用 -->
<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!--<script lang="ts">
export default {
  name: 'Person',
}
</script>-->

<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!-- 如果没有定义组件名称，没有给script写name定义组件名称的话，默认就是组件的名称。 -->
<script setup lang="ts" name="Person">
import { computed, ref } from 'vue'

let firstName = ref<string | undefined>('张')
let lastName = ref<string | undefined>('飒飒')
// 这样写的计算属性是不能修改的
// let fullName = computed(() => {
//   return firstName.value + '-' + lastName.value
// })

// let maybeString: string | undefined = '张飒飒'
// // 方法 1: 使用 ?? (推荐，只在值为 null 或 undefined 时使用默认值)
// let definitelyString1: string = maybeString ?? '默认值'
// // 方法 2: 使用 || (当值为 falsy 时都使用默认值，如 '', 0, false)
// let definitelyString2: string = maybeString || '默认值'

// 这么定义的fullName是一个计算属性，可读可写
let fullName = computed({
  set(newValue: string) {
    console.log(newValue)
    const [str1, str2] = newValue.split('-')
    firstName.value = str1 ?? 'null'
    lastName.value = str2 ?? 'null'
  },
  get() {
    return firstName.value + '-' + lastName.value
  },
})
</script>

<template>
  <div class="person">
    <h1>人员信息：</h1>
    姓：<input type="text" v-model="firstName" /> <br />
    名：<input type="text" v-model="lastName" /> <br />
    <!-- <span>全名：{{ fullName }}</span>-->
    全名：<input type="text" v-model="fullName" /> <br />
  </div>
</template>

<style scoped>
.person {
  background-color: #dab649;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 10px;
}
</style>
